<template>
  <div class="main">
    <div class="body">
      <!-- arclst -->
      <div class="bodys">
        <div class="bodys1">首页</div>
        <div class="bodys2">
          <div class="sjbd">今日数据变动</div>
          <div class="bglist">
            <div class="bglists" :v-model="ItemInfo">
              <div>新增学员</div>
              <div>
                <span style="color: red">{{ ItemInfo.addCounts }}</span
                >人
              </div>
            </div>
            <div class="bglists">
              <div>代付费成员</div>
              <div>
                <span style="color: red">{{ ItemInfo.renewCounts }}</span
                >人
              </div>
            </div>
            <div class="bglists">
              <div>今日课节</div>
              <div>
                <span style="color: red">{{ ItemInfo.courseCounts }}</span
                >节
              </div>
            </div>
            <div class="bglists">
              <div>请假人数</div>
              <div>
                <span style="color: red">{{ ItemInfo.leaveCounts }}</span
                >人
              </div>
            </div>
            <div class="bglists">
              <div>上课学员人数</div>
              <div>
                <span style="color: red">{{ ItemInfo.studentCounts }}</span
                >人
              </div>
            </div>
            <div class="bglists">
              <div>上课老师人数</div>
              <div>
                <span style="color: red">{{ ItemInfo.teacherCounts }}</span
                >人
              </div>
            </div>
          </div>
        </div>
        <div class="bodys3">
          <div class="bodyinfoa">
            <div class="bodys3top">学生总数</div>
            <div>单月增加</div>
          </div>
          <div>123</div>
        </div>
      </div>
      <div class="bodyright">
        <div class="bodyright1">
          <div class="bodyright1s">事项提醒</div>
          <div class="bodyright1xf">
            <div>
              <el-tag>续费</el-tag>
            </div>
            <div>有0位成员剩余课时低于2</div>
          </div>
        </div>
        <div class="bodyright2">
          <div class="bodyright2s">生日学员</div>
          <div class="birthday" v-for="item in birthday">
            <div style="width: 30px; height: 30px; background-color: #999">
              <img src="{{item.photo}}" alt="" />
            </div>
            <div class="text1">{{ item.name }}</div>
            <div class="text2">{{ item.birthday }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ItemInfo: [],
      birthday: [],
      options: [
        {
          value: "选项1",
          label: "账号管理",
        },
        {
          value: "选项2",
          label: "修改密码",
        },
        {
          value: "选项3",
          label: "退出登陆",
        },
      ],
      value: "",
    };
  },
  created() {
    this.getItemList();
    this.getbirthdayList();
  },
  mounted() {},
  methods: {
    // 今日数据变动
    async getItemList() {
      const token = window.sessionStorage.getItem("token");
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/students/todaycounts",
        { headers: { token } }
      );
      this.ItemInfo = res.data.model;
    },
    async getbirthdayList() {
      const token = window.sessionStorage.getItem("token");
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/students/birthday",
        { headers: { token } }
      );
      this.birthday = res.data.list;
    },
  },
};
</script>
<style>
.body {
  display: flex;
  width: 100%;
}
.bodys {
  margin-left: 20px;
  width: 13.5%;
}
.bodys2 {
  height: 140px;
  background-color: #fff;
}
.bodys1 {
  margin: 25px 0 20px 0;
}
.sjbd {
  padding: 15px 0 15px 25px;
}
.bglist {
  padding: 0px 0 15px 25px;
}
.bodys3 {
  margin-top: 20px;
  height: 500px;
  background-color: #fff;
}
.bodyinfoa {
  width: 1350px;
  display: flex;
  justify-content: center;
}
.bodys3top {
  margin-right: 30px;
}
.bodyright {
  margin: 60px 0 0 30px;
}
.bodyright1 {
  width: 400px;
  height: 300px;
  margin-bottom: 30px;
  background-color: #fff;
}
.bodyright2 {
  width: 400px;
  height: 328px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow:scroll;
}
.bodyright1s {
  padding: 10px 0 0 10px;
}
.bodyright2s {
  padding: 10px 0 0 10px;
}
.el-icon-folder-remove,
.el-icon-document,
.el-icon-folder-checked,
.el-icon-pie-chart,
.el-icon-user,
.el-icon-price-tag {
  font-size: 30px;
  align-items: center;
  padding: 8px 0;
}

.adda {
  margin: 0 auto;
  text-align: center;
}
.bodyright1xf {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20px;
}
.bodyright1xf div {
  margin-right: 10px;
}
/* 今日数据变动 */
.bglist {
  display: flex;
  justify-content: space-around;
  width: 95%;
  height: 60%;
}
.bglists {
  border: 1px solid rgb(240, 236, 236);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bglists div {
  margin-top: 10px;
}
/* 生日学员 */
.birthday {
  display: flex;
  margin-left: 2%;
  margin-top: 5%;
  width: 96%;
  height: 15%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #999;
}
.text1 {
  width: 20%;
  margin-left: 5%;
}
.text2 {
  width: 25%;
  margin-left: 40%;
}
.birthday div:nth-child(1) {
  /* margin-right: 3%; */
  width: 40%;
}

img {
  width: 100%;
  height: 100%;
}
</style>